<template>
    <div class="navigation">
        <div class="navigation-container">
            <div class="tab-box">
                <div class="tab-detail" v-for="(item,index) in content" :key="index" @touchend='switchTab(index)' :style="{width:tabComputedWidth+'rem'}" >
                    <span :class="{activeTab:activeTabNum == index}">{{item}}</span>
                </div>
            </div>
            <div class="tab-line">
                <div class="line" :style="{width:tabComputedWidth+'rem',transform:moveLine}"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"navigation",
    props:['content','parentWidth'],
    data(){
        return {
            tabComputedWidth:'',
            lineWidth:0,
            activeTabNum:0,
            moveLine:''
        }
    },
    methods:{
        computedWidth(){
            let length = this.content.length;
            this.tabComputedWidth = this.parentWidth/length/100;
            this.lineWidth = this.parentWidth/length/100;
        },
        switchTab(){
            console.log('wait');
        }
    },
    mounted(){
        this.computedWidth();
    },
    computed:{
        currentNum(){
            return this.$store.state.homeTabIndex;
        }
    },
    watch:{
        currentNum(){
            this.activeTabNum = this.$store.state.homeTabIndex;
            this.moveLine = `translateX(${this.activeTabNum*this.lineWidth}rem)`
        }
    }
}
</script>

<style lang='less'>
@rem:100rem;

.navigation{
    width: 100%;
    margin: 0 auto;
    .navigation-container{
        width: 100%;
        box-sizing: border-box;
        height: 70/@rem;
        display: flex;
        flex-direction: column;
        .tab-box{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        .tab-detail{
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 72/@rem;
            cursor: pointer;
            span{
                color: #333333;
                font-size: 22/@rem;
            }
            .activeTab{
                color: #6699ff;
            }
        }
        .tab-line{
            width: 100%;
            .line{
                height: 6/@rem;
                background: #6699ff;
                transition: all 0.2s cubic-bezier(.17,.67,.37,1.16) 
            }
        }
    }
}
</style>
